<template>
  <view class="search-component">
    <view class="search-layout" v-if="inputType == 1">
      <view class="search-box">
        <view class="input-left">
          <text class="iconfont icon-weibiaoti--4"></text>
        </view>
        <view class="search-text-list" @click="inputType = 2">
          <swiper
            class="swiper"
            circular
            :vertical="true"
            :autoplay="true"
            :interval="5000"
            :duration="300"
          >
            <swiper-item>
              <view class="swiper-item uni-bg-red"
                >唯品会·瑜伽服秋冬 <text class="red-text">三折起</text></view
              >
            </swiper-item>
            <swiper-item>
              <view class="swiper-item uni-bg-green">男士卫衣</view>
            </swiper-item>
            <swiper-item>
              <view class="swiper-item uni-bg-blue"
                >乐卡克鞋<text class="green-text">上新</text></view
              >
            </swiper-item>
          </swiper>
        </view>
        <view class="input-right">
          <text class="iconfont icon-weibiaoti--45"></text>
        </view>
      </view>
      <view class="right-box">
        <view class="img-box">
          <image
            src="/static/common/weipinhui/qiandao.gif"
            class="hongbao-img"
            mode="widthFix"
          />
        </view>
        <text class="iconfont icon-weibiaoti--33"></text>
      </view>
    </view>

    <view class="search-layout-bottom" v-if="inputType == 2">
      <view class="search-box-flex">
        <view class="icon-box">
          <text
            class="iconfont icon-weibiaoti--10"
            @click="inputType = 1"
          ></text>
        </view>
        <input
          type="text"
          class="search-input"
          v-model="inputValue"
          placeholder="瑜伽服秋冬"
          placeholder-class="placeholder-style"
          :focus="true"
        />
        <view class="input-right">
          <text
            v-if="inputValue"
            class="iconfont icon-weibiaoti--13"
            @click="clearInputValue"
          ></text>
          <text class="iconfont icon-weibiaoti--45"></text>
          <view class="search-btn">搜索</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "search004",
  props: {},
  components: {},
  setup() {
    const data = reactive({
      inputType: 1,
      inputValue: "",
    });

    const clearInputValue = () => {
      data.inputValue = "";
    };
    return {
      clearInputValue,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.search-component {
  .search-layout {
    display: flex;
    justify-content: space-between;
    height: 90rpx;
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    .search-box {
      flex: 1;
      position: relative;

      .search-text-list {
        height: 100%;
        line-height: 62rpx;
        box-sizing: border-box;
        color: #000;
        border-radius: 25rpx;
        background: #fff;
        border: 4rpx solid #ff0777;
        padding-left: 80rpx;
        overflow: hidden;
        .swiper {
          height: 100%;
          .red-text,
          .green-text {
            color: #ff0777;
            height: 24rpx;
            line-height: 24rpx;
            background: #fcecf4;
            padding: 0 8rpx;
            border-radius: 6rpx;
            font-size: 20rpx;
            margin-left: 10rpx;
            font-weight: 300;
          }
          .green-text {
            color: #56bfa0;
            background: #edf9f7;
          }
          .swiper-item {
            display: flex;
            align-items: center;
            font-size: 26rpx;
            font-weight: 300;
          }
        }
      }
      .input-left {
        display: flex;
        align-items: center;
        line-height: 50rpx;
        position: absolute;
        top: 10rpx;
        left: 20rpx;
        .icon-weibiaoti--4 {
          font-size: 46rpx;
          margin-right: 20rpx;
          color: #ff0777;
        }
      }
      .input-right {
        display: flex;
        align-items: center;
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        .icon-weibiaoti--45 {
          font-size: 40rpx;
          margin-right: 20rpx;
          margin-top: 5rpx;
          color: #999;
        }
      }
    }
    .right-box {
      display: flex;
      align-items: center;
      .img-box {
        width: 70rpx;
        margin: 0 10rpx;
        .hongbao-img {
          display: block;
          width: 100%;
        }
      }

      .icon-weibiaoti--33 {
        font-size: 46rpx;
      }
    }
  }
  .search-layout-bottom {
    display: flex;
    justify-content: space-between;
    height: 80rpx;
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    .search-box-flex {
      position: relative;
      display: flex;
      justify-content: space-between;
      width: 100%;
      .icon-box {
        line-height: 60rpx;
        width: 50rpx;
        overflow: hidden;
        text-align: left;
        transition: 0.3s;
        .icon-weibiaoti--10 {
          font-size: 40rpx;
          color: #000;
        }
      }
      .search-input {
        flex: 1;
        height: 100%;
        width: 100%;
        padding-left: 20rpx;
        box-sizing: border-box;
        color: #000;
        border-radius: 22rpx;
        background: #fff;
        border: 3rpx solid #ff0777;
        overflow: hidden;
        font-size: 26rpx;
        font-weight: 300;
        //   placeholder样式修改
        .placeholder-style {
          color: #777;
        }
      }
      .input-right {
        display: flex;
        align-items: center;
        position: absolute;
        top: 4rpx;
        right: 4rpx;
        .icon-weibiaoti--45 {
          font-size: 40rpx;
          margin-right: 20rpx;
          color: #999;
        }
        .icon-weibiaoti--13 {
          font-size: 30rpx;
          margin-right: 30rpx;
          margin-top: 2rpx;
          color: #999;
        }
        .search-btn {
          border-radius: 20rpx;
          height: 52rpx;
          line-height: 50rpx;
          padding: 0 30rpx;
          font-size: 26rpx;
          font-weight: 500;
          color: #fff;
          background: linear-gradient(270deg, #ff11a0 -0.11%, #ff0777 99.89%);
        }
      }
    }
  }
}
</style>
